<template>
  <div class="wrapper">
    <div class="head">
      <h3>
        <span>{{info.icon}}</span>
        <a href="#">{{info.title}}</a>
      </h3>
      <h3>{{info.type}}</h3>
    </div>

    <!-- 使用goods组件 -->
    <goods v-for="item in info.goodsList" :key="item.id" :goods-detail="item"></goods>
  </div>
</template>
<script>
import goods from '@/components/goods.vue'
export default {
  components: {
    goods
  },
  methods: {

  },
  props: {
    info: {
      type: Object,
      required: true
    }
  }
}
</script>
<style scoped>
.wrapper {
  width: 450px;
  height: 420px;
}
.wrapper > .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  padding: 10px;
  border-bottom: 1px solid #000;
}
</style>
